<template>	
	<view class="content">
		<form @submit='_submit'>
			<view class="edit_li">
				<text class="text">收货人</text>
				<input placeholder-class='input_zi' placeholder='请输入收货人' v-model="contact"></input>
			</view>
			<view class="edit_li">
				<text class="text">联系电话</text>
				<input placeholder-class='input_zi' placeholder='请输入联系电话' v-model="phone"></input>
			</view>
			<view class="edit_li" @tap="select_position">
				<text class="text">所在地区</text>
				<text class='input_zi'>{{citychose}}</text>
			</view>
			<view class="edit_li">
				<text class="text">街道</text>
				<input placeholder-class='input_zi' placeholder='请输入街道' v-model="street"></input>
			</view>
			<view class="edit_li">
				<text class="text">详细地址</text>
				<input placeholder-class='input_zi' placeholder='请输入详细地址' v-model="address_detail"></input>
			</view>
			<view class='edit_li'>
				<text class="text">设为默认地址</text>
			  <switch checked @change="switch1Change" color="#5a70fb" />
			</view>
			<view class='myads_but'>
			  <button form-type="submit" class="push">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			 
			citychose: '请选择地址',
			address_detail: '',
			contact: '',
			phone: '',
			street: '',
			is_default: 1
		};
	},
	methods: {
		// 选择地址
		select_position() {
			uni.chooseLocation({
				success: res => {
					this.$ajax.position_to_address(res.longitude, res.latitude).then(res => {
						console.log(res);
						this.citychose =
							res.address_component.province +
							' ' +
							res.address_component.city +
							' ' +
							res.address_component.district;
						this.address_detail = res.formatted_addresses.recommend;
						this.street = res.address_component.street;
					});
				}
			});
		},
		// 切换是否 默认
		switch1Change: function(e) {
			console.log('switch1 发生 change 事件，携带值为' + e.detail.value);
			if (e.detail.value) {
				this.is_default = 1;
			} else {
				this.is_default = 0;
			}
		},

		_submit(e) {
			if (!this.contact) {
				this.$alert('请填写收货人');
				return;
			}
			if (!this.phone) {
				this.$alert('请填写联系电话');
				return;
			}
			if (!this.citychose) {
				this.$alert('请选择地址');
				return;
			}
			if (!this.street) {
				this.$alert('请填写街道名称');
				return;
			}
			if (!this.address_detail) {
				this.$alert('请填写详细地址');
				return;
			}
			let data = {
				contact:this.contact,
				area:this.citychose,
				phone:this.phone,
				street:this.street,
				address:this.address_detail,
				is_default:this.is_default,
				// address_id:this.address_id
			};
			// console.log(data)
 
			this.$ajax.post({
				url: '/Address/addAddress',
				data
			}).then(res=>{
				console.log(res)
				if(res.code==200){
					this.$alert("修改成功");
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},800)
				}else{
					this.$alert(res.msg)
				}
			})
		},
		// 初始化地址数据
		init_address_data(){
			this.$ajax.post({
				url:"/Address/findAddress",
				data:{address_id:this.address_id}
			}).then(res=>{
				if(res.code==200){
					this.contact = res.data.contact;
					this.citychose = res.data.area;
					this.street = res.data.street;
					this.address_detail = res.data.address;
					this.phone = res.data.phone;
					this.is_default = res.data.is_default;
				}else{
					this.$alert(res.msg)
				}
			})
		}
	},
	onLoad(opt) {
		// this.address_id = opt.id;
		// this.init_address_data()
	}
};
</script>

<style>
.content {
	padding: 0 20upx;
	box-sizing: border-box;
	box-shadow: 0 8px 10px -8px #eee inset;
	border-top: 1px solid #eee;
}
.edit_li {
	line-height: 100upx;
	border-bottom: 1px solid #eee;
	padding: 0 20upx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.edit_li .text {
	width: 200upx;
}
.edit_li input {
	justify-content: flex-end;
	text-align: right;
	color: #a4a8b4;
}
.input_zi {
	color: #a4a8b4;
}
.push {
	background: #ff5d76;
	border: none;
	width: 250upx;
	height: 70upx;
	line-height: 70upx;
	color: #fff;
	border-radius: 50upx;
	font-size: 34upx;
	margin: 150rpx auto 0;
}
.mpvue-picker__hd {
	box-sizing: border-box;
}
</style>
